<template>
  <div class='buy-wrap'>
    <div class="buy-nav" @click="shippingAddress">
      <div class="address">
        <img class="address-navigation" src="/static/images/icon_NavigationAddress2.png">
        <div class="address-text-wrap" v-show="!addressFlag">
          <div class="user-name">收货人：{{userInfo}}</div>
          <div class="user-address">收货地址：{{addressText}}</div>
        </div>
        <div class="address-text-wrap" v-show="addressFlag">请添加收货地址</div>
        <img class="address-arrow-right" src="/static/images/arrow-right-s-line.png">
      </div>
      <div class="tips">
        邮管局提示：即日起，快递单上禁止出现 *先生、*小姐等姓名，为防止您的快递无法正常寄送，请务必填写真实姓名。
      </div>
    </div>

    <div class="buy-list" v-for="(item, index) of payData" :key="index">
      <!-- 这里的num代表购买的商品数量 -->
      <van-card
        :num="'x'+item.num"
        :price="item.price"
        :title="item.title"
        :desc="'款式颜色：' + item.spec"
        :thumb="item.thumb"
        title-class="sales-title"
        num-class="sales-num"
        price-class="sales-price"
        custom-class="sales-wrap"
        desc-class='sales-desc'
      >
      </van-card>
      <!-- 商品备注 -->
      <div class="note">备注：</div>
      <wux-cell-group>
        <wux-cell hover-class="none">
          <wux-textarea
            hasCount rows="3"
            cursorSpacing="80"
            placeholder="..."
            @change="onChange(0, $event)"
            wux-class="note-text"
          />
        </wux-cell>
      </wux-cell-group>
    </div>

    <!-- 底部立即支付 -->
    <div class='footer'>
      <div class='total'>
        合计：<span>{{MoneySymbol}}{{totalAmount}}</span>
      </div>
      <button class='settlement'
      @click.stop="goPay"
      >
        立即支付
      </button>
    </div>
  </div>
</template>

<script>
import {
  showToast, bindViewTap, noUrlToNewPage, getStorageSync
  // fetch, hideLoading, showLoading
} from '@/utils/index' // 引入公用库
// import { getIndexList, getUrl } from '@/utils/api' // 请求封装公用库
import store from '@/utils/store' // 全局状态管理
import TYPES from '@/constant/index' // 常量文件

export default {
  data () {
    return {
      addressFlag: false, // 控制是否显示 请添加地址(假不显示)
      noteValue: [], // 商品备注
      arrFlag: 'payData', // 默认单个商品购买（动态传入值变化的）
      addressText: '', // 用户地址信息
      userInfo: '', // 用户资料
      MoneySymbol: TYPES.goodsData.MoneySymbol // 存金额前缀符号
    }
  },
  // 计算属性
  computed: {
    // 购物车商品数据
    payData () {
      return store.state[this.arrFlag]
    },
    // 总金额计算
    totalAmount () {
      let data = store.state[this.arrFlag]
      let numAll = 0 // 总数
      for (let i = 0; i < data.length; i++) {
        // 累加金额，数量*金额
        numAll += (data[i]['num'] * data[i]['price'])
      }
      return numAll
    }
  },
  // 引入组件可当标签使用
  components: {
  },
  // 定义自定义函数
  methods: {
    // 在备注输入时触发事件
    onChange (index, e) {
      // 保存用户输入的备注信息
      setTimeout(() => {
        this.noteValue[index] = e.target.value
      }, 30)
    },
    // 增加数量
    increment (e) {
      // 把当前商品信息数据传入
      store.dispatch('increment', e)
    },
    // 减少数据
    decrement (e) {
      store.dispatch('decrement', e)
    },
    // TODO:买单支付金额
    goPay () {
      if (this.addressFlag) {
        showToast({
          title: '请添加收货地址',
          icon: 'none'
        })
        return
      }
      setTimeout(() => {
        console.log('保存的备注信息', this.noteValue[0])
        console.log('商品信息', this.payData)
        console.log('金额', this.totalAmount)

        showToast({
          title: '结算成功'
        })
      }, 30)
    },
    // 跳转添加收货地址
    shippingAddress () {
      // backPage控制回退页面，flag控制跳转页面模式（首页要用false）
      bindViewTap('../address/main?backPage=buyPage&flag=true', true)
    },
    // 用户地址信息处理
    addressFrom () {
      const data = getStorageSync('addressFrom')
      if (!data.cityname) {
        // 当没有本地缓存，显示增加联系地址内容
        this.addressFlag = true
      } else {
        // 拼接联系地址信息
        this.addressText = `${data.cityname} ${data.detailedAddress}`
        this.userInfo = `${data.username} ${data.phone}`
        this.addressFlag = false
      }
    }
  },
  // 在实例创建完成后被立即调用
  mounted () {
    this.arrFlag = this.$mp.query.arrFlag || 'payData'
    // 容错处理，转发其它方式直接进入页面的，跳去首页(封装过)
    noUrlToNewPage((store.state[this.arrFlag].length === 0))
    // noUrlToNewPage(false) // 调试开关
  },
  // 小程序生命周期
  onShow () {
    this.addressFrom() // 更新地址栏数据
  }
}
</script>

<style scope>
page {
  background-color: rgb(248, 248, 248);
  color: #000;
}
.buy-wrap {
  padding-bottom: 140rpx;
}
/* 收货地址栏区域 */
.buy-nav {
  box-sizing: border-box;
  font-size: 28rpx;
  background: #fff;
}
.address {
  display: flex;
  padding: 15px;
  justify-content: center;
  align-items: center;
}
.address .address-navigation, .address .address-arrow-right {
  width: 48rpx;
  height: 48rpx;
}
.address .address-text-wrap {
  flex: 1;
  line-height: 48rpx;
  padding-left: 16rpx;
}
/* 收货人及地址 */
.user-name {}
.user-address {
  font-size: 22rpx;
}
.tips {
  padding: 0 23rpx 30rpx 26rpx;
  font-size: 24rpx;
  color: #FF4081;
}
/* 商品卡片 */
.buy-list {
  margin-top: 14rpx;
}
.buy-list .note{
  margin-top: 12rpx;
  padding-left: 16rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  background: #fff;
}
.buy-list .note-text{
  font-size: 24rpx;
}
.sales-wrap {
  background: #fff !important;
}
.sales-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*显示几行*/
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin: 6rpx 0 8rpx 0;
  font-size: 28rpx;
}
/* 商品描述,产品款式 */
.sales-desc{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /*显示几行*/
  -webkit-box-orient: vertical;
  word-break: break-all;
  font-size: 24rpx;
  height: 28rpx;
  line-height: 28rpx !important;
}
/* 商品价格 */
.sales-price {
  position: absolute;
  font-size: 28rpx;
  bottom: 10rpx;
  color: #C5223D !important;
}
/* 购买数量 */
.sales-num {
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  font-size: 28rpx;
}
/* 左侧图片调整空间大小 */
.van-card__thumb {
  width: 120px !important;
  height: 80px !important;
}
.sales-thumb {
  overflow: hidden;
  width: 120px;
  height: 80px;
  border-radius: 6px;
  /* 给元素增加阴影  参数解析：1x水平阴影 2y垂直阴影 3模糊距离 4阴影尺寸 5阴影颜色 inset（内部阴影）逗号隔开可写多组叠加 */
  box-shadow: 1px 0 3px #969696;
}
/* 底部结算栏 */
.footer {
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  display:-webkit-flex;
  display:flex;
  justify-content: center;
  align-items: center;
  height: 96rpx;
  font-size: 32rpx;
  background-color:#000;
  z-index: 99999;
}
.footer .total {
  flex: 1;
  padding-left: 22rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  color: #fff;
}
.footer .total span{
  font-size: 38rpx;
  color: #E9CF85;
  /* color: #C5223D; */
}
/* 立即结算按钮 */
.footer .settlement {
  position: absolute;
  height: 68rpx;
  line-height: 68rpx;
  right: 36rpx;
  bottom: 16rpx;
  font-size: 28rpx;
  border-radius: 26rpx;
  padding: 0 36rpx;
  color: #000;
  background-image: linear-gradient(110deg, #CA9D52 0,
    #EEE697, #E8BB58 , #EEE697 , #CA9D52 100%);
  /* 背景颜色渐变（可放多个渐变） 参数1方向（可写角度50deg）2颜色（占的比例-可选） 3颜色..可多个颜色 */
  /* background-image: linear-gradient(to right, #FF7601, #FE5600); */
  /* color: #FFF4D4; */
}
</style>
